<template>
    <create-view
        :loading="loading"
        :body-style="{ height: '100%'}"
    >
        <flexbox
            direction="column"
            align="stretch"
            class="crm-create-container"
        >
            <flexbox class="crm-create-header">
                <div style="flex:1;font-size:17px;color:#333;">{{title}}</div>
                <img
                    @click="hidenView"
                    class="close"
                    src="@/assets/img/task_close.png"
                />
            </flexbox>
            <flexbox
                class="crm-create-flex"
                direction="column"
                align="stretch"
            >
                <div class="crm-create-body">
                    <!-- <div class="create-name">基本信息</div> -->
                    <el-form
                        ref="crmForm"
                        :model="crmForm"
                        label-position="top"
                        class="crm-create-box"
                    >
                        <el-form-item
                            v-for="(item, index) in this.crmForm.crmFields"
                            :key="item.key"
                            :prop="'crmFields.' + index + '.value'"
                            :class="{ 'crm-create-block-item': item.showblock, 'crm-create-item': !item.showblock }"
                            :rules="crmRules[item.key]"
                            :style="{'padding-left': getPaddingLeft(item, index), 'padding-right': getPaddingRight(item, index)}"
                        >
                            <div
                                slot="label"
                                style="display: inline-block;"
                            >
                                <div style="margin:5px 0;font-size:12px;word-wrap:break-word;word-break:break-all;">
                                    {{item.data.name}}
                                    <span style="color:#999;">
                                        {{item.data.input_tips ? '（'+item.data.input_tips+'）':''}}
                                    </span>
                                </div>
                            </div>
                            <component
                                :is="item.data.form_type | typeToComponentName"
                                :value="item.value"
                                :index="index"
                                :item="item"
                                :radio="false"
                                @value-change="fieldValueChange"
                            >
                            </component>
                        </el-form-item>
                    </el-form>
                </div>
            </flexbox>
            <div class="handle-bar">
                <el-button
                    class="handle-button"
                    @click.native="hidenView"
                >取消</el-button>
                <el-button
                    class="handle-button"
                    type="primary"
                    @click.native="saveField"
                >保存</el-button>
            </div>
        </flexbox>
    </create-view>
</template>
<script type="text/javascript">
import CreateView from "@/components/CreateView";
import {
    addRecordAPI,
    positionListAPI,
    recordInfoAPI,
    editRecordAPI
} from "@/api/personnel/personnel";

import {
    XhInput,
    XhTextarea,
    XhSelect,
    XhUserCell,
    XhStrucUserCell,
    XhDateTime
} from "@/components/CreateCom";
import Nzhcn from "nzh/cn";

export default {
    name: "create",
    components: {
        CreateView,
        XhInput,
        XhTextarea,
        XhSelect,
        XhUserCell,
        XhStrucUserCell,
        XhDateTime
    },
    computed: {
        title() {
            if (this.handle.action === "save") {
                return "新建待面试人员";
            } else if (this.handle.action === "update") {
                return "编辑待面试人员";
            }
        }
    },
    data() {
        return {
            // 标题展示名称
            loading: false,
            // 自定义字段验证规则
            crmRules: {},
            // 自定义字段信息表单
            crmForm: {
                crmFields: []
            },
            positionList: []
        };
    },
    filters: {
        /** 根据type 找到组件 */
        typeToComponentName(form_type) {
            if (form_type == "text") {
                return "XhInput";
            } else if (form_type == "textarea") {
                return "XhTextarea";
            } else if (form_type == "select") {
                return "XhSelect";
            } else if (form_type == "structure") {
                return "XhStrucUserCell";
            } else if (form_type == "dateTime") {
                return "XhDateTime";
            }
        },
        numberToZh: function(value) {
            return Nzhcn.encodeS(value);
        }
    },
    props: {
        handle: {
            type: Object,
            default: () => {
                return {
                    action: "save", // save 创建  update 编辑
                    id: "",
                    data: null // 编辑数据
                };
            }
        }
    },
    mounted() {
        console.log('this.handle.position=====>', this.handle.position)
        document.body.appendChild(this.$el);
        this.positionList = this.handle.position;
        this.getField();
    },
    methods: {
        // 字段的值更新
        fieldValueChange(data) {
            var item = this.crmForm.crmFields[data.index];
            item.value = data.value;
            //无事件的处理 后期可换成input实现
            // if (item.data.form_type == 'structure') {
            //   this.$refs.crmForm.validateField('crmFields.' + data.index + '.value')
            // }
        },
        // 获取自定义字段
        getField() {
            var field = [];
            var info = this.handle.data;
            field.push({
                field: "position_id",
                form_type: "select",
                is_null: 1,
                name: "岗位名称",
                setting: this.positionList,
                value: info ? info.position_id : ""
            });
            field.push({
                field: "name",
                form_type: "text",
                is_null: 1,
                name: "面试人姓名",
                setting: [],
                input_tips: "",
                value: info ? info.name : ""
            });
            field.push({
                field: "mobile",
                form_type: "text",
                is_null: 1,
                name: "面试人电话",
                setting: [],
                input_tips: "",
                value: info ? info.mobile : ""
            });
            field.push({
                field: "plan_date",
                form_type: "dateTime",
                is_null: 1,
                name: "计划面试时间",
                setting: [],
                input_tips: "",
                value: info ? info.plan_date : ""
            });

            field.push({
                field: "remark",
                form_type: "textarea",
                is_null: 0,
                name: "备注",
                setting: [],
                input_tips: "请填写相关描述，限制输入2000字",
                value: info ? info.remark : ""
            });

            // field.push({
            //     field: "structure",
            //     form_type: "structure",
            //     is_null: 0,
            //     name: "应用部门",
            //     setting: [],
            //     input_tips: "默认全公司",
            //     value: {
            //         users: this.handle.data
            //             ? this.handle.data.user_ids_info
            //             : [],
            //         strucs: this.handle.data
            //             ? this.handle.data.structure_ids_info
            //             : []
            //     }
            // });

            this.getcrmRulesAndModel(field);
        },
        // 根据自定义字段获取自定义字段规则
        getcrmRulesAndModel(list) {
            for (let index = 0; index < list.length; index++) {
                const item = list[index];
                /** 规则数据 */
                var tempList = [];

                //验证必填
                if (item.is_null == 1) {
                    tempList.push({
                        required: true,
                        message: item.name + "不能为空",
                        trigger: ["blur", "change"]
                    });
                }

                this.crmRules[item.field] = tempList;

                /** 表单数据 */
                var params = {};
                params["value"] = item.value;
                params["key"] = item.field;
                params["data"] = item;
                if (item.form_type == "textarea") {
                    params["showblock"] = true; // 展示整行效果
                }
                this.crmForm.crmFields.push(params);
            }
        },
        // 保存数据
        saveField() {
            this.$refs.crmForm.validate(valid => {
                if (valid) {
                    this.submiteParams(this.crmForm.crmFields);
                } else {
                    this.$message.error("请完善必填信息");
                    return false;
                }
            });
        },
        // 请求url
        getRequest() {
            return this.handle.action === "update"
                ? editRecordAPI
                : addRecordAPI;
        },
        /** 上传 */
        submiteParams(array) {
            this.loading = true;
            var params = this.getSubmiteParams(array);
            if (this.handle.action == "update") {
                params.id = this.handle.id;
            }
            this.getRequest()(params)
                .then(res => {
                    this.loading = false;
                    this.hidenView();
                    this.$message.success(res.data);
                    // 回到保存成功
                    this.$emit("save");
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 请求参数
        getSubmiteParams(array) {
            var params = {};
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                params[element.key] = element.value;
            }
            return params;
        },
        hidenView() {
            this.$emit("hiden-view");
        },
        // 获取左边padding
        getPaddingLeft(item, index) {
            if (item.showblock && item.showblock == true) {
                return "0";
            }
            return index % 2 == 0 ? "0" : "25px";
        },
        // 获取左边padding
        getPaddingRight(item, index) {
            if (item.showblock && item.showblock == true) {
                return "0";
            }
            return index % 2 == 0 ? "25px" : "0";
        }
    },
    destroyed() {
        // remove DOM node after destroy
        if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el);
        }
    }
};
</script>
<style lang="scss" scoped>
.crm-create-container {
    position: relative;
    height: 100%;
}

.crm-create-flex {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
}

.crm-create-header {
    height: 40px;
    margin-bottom: 20px;
    padding: 0 10px;
    flex-shrink: 0;
    .close {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: -10px;
        padding: 10px;
    }
}
.create-name {
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    margin-bottom: 10px;
    color: #333333;
    border-left: 2px solid #46cdcf;
}

.crm-create-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

/** 将其改变为flex布局 */
.crm-create-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
}

.crm-create-item {
    flex: 0 0 50%;
    flex-shrink: 0;
    padding-bottom: 10px;
}

// 占用一整行
.crm-create-block-item {
    flex: 0 0 100%;
    flex-shrink: 0;
    padding-bottom: 10px;
}

.el-form-item /deep/ .el-form-item__label {
    line-height: normal;
    font-size: 13px;
    color: #333333;
    position: relative;
    padding-left: 8px;
    padding-bottom: 0;
}

.el-form /deep/ .el-form-item {
    margin-bottom: 0px;
}

.el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
    position: absolute;
    left: 0;
    top: 5px;
}

.examine-items {
    padding: 10px 0;
}

.examine-item {
    padding-bottom: 8px;
    .examine-item-name {
        width: 60px;
        padding-left: 20px;
        font-size: 13px;
        margin-right: 20px;
    }
    .examine-item-select {
        margin-right: 20px;
    }
    .examine-item-user {
        flex: 1;
        margin-right: 42px;
    }
    .examine-item-delete {
        color: #ff6767;
        font-size: 22px;
        margin: 0 10px;
        display: none;
    }
}

.examine-item:hover {
    .examine-item-delete {
        display: block;
    }
    .examine-item-user {
        margin-right: 0px;
    }
}

.examine-items-add {
    padding: 5px 0 20px 0;
    font-size: 13px;
    color: $xr-color-primary;
}

.examine-add-des {
    font-size: 12px;
    background-color: #fffcf0;
    padding: 10px;
    line-height: 23px;
    color: #999;
    margin-bottom: 10px;
    .examine-add-required {
        color: #ff6767;
    }
}
.handle-bar {
    position: relative;
    .handle-button {
        float: right;
        margin-top: 5px;
        margin-right: 20px;
    }
}
</style>
